<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Charon-Music</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="/charon/music/css/nonono.css">
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
	.slide-img{
		width: 	100%;
		height: 400px;
	}
	.nine{
		width: 31%;
		height: 31%;
		background: #05a050;
		float: left;
		display: inline-block;
		text-align: center;
		border: 5px solid #f0afaf;
		margin:1%;
	}
	.nine>img{
		width: 100%;
		height: 100%;
	}


	.overlay {   
		position: absolute;   
		top: 0px;   
		left: 0px;   
		z-index: 10001;  
		width: 100%;
		height: 100%;
		filter:alpha(opacity=60);   
		background-color: #777;   
		opacity: 0.5;   
		-moz-opacity: 0.5;   
	}    
</style>
<body>	
	<!-- 页面导航 -->
	<div style="width:100%;height:90px;background:#fff;border-bottom:1px solid #E8e8e8">
		<div class="header" style="border-bottom:1px solid #E8e8e8">
			<a href="javascript:alert('测试主页按钮')" class="home-button">Charon</a>
			<nav>
				<a href="javascript:alert('测试主页按钮')" ">音乐</a>
				<a href="javascript:alert('测试主页按钮')" ">歌单</a>
				<a href="javascript:alert('测试主页按钮')" ">电台</a>
			</nav>
			<div>
				<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3" style="width: 28%;margin-top: 38px;">
					<div class="input-group">
						<input type="text" class="form-control"
						placeholder="Search for..."> 
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">Go!</button>
						</span>
					</div>
				</div>
			</div>
			<button class="info-btn"></button>
			<button class="info-btn"></button>
		</div>
	</div>
	<!-- lunbotu -->
	<div id="myCarousel" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>   
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542394125677&di=cff692f8aabff5c2777bd40f58983f7e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-17%2F5a0e768fb8f0a.jpg" alt="First slide" class="slide-img" style="width:100%;height: 550px;">
			</div>
			<div class="item">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542394216336&di=c5861eb2cee2366ff3ebb7ad7586fbf4&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F58a1405502c08.jpg" alt="Second slide" class="slide-img" style="width:100%;height: 550px;"> 
			</div>
			<div class="item">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542394279326&di=9cc59b84fca0328e518b63e1b210e1c1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-15%2F5a0be3d22d085.jpg%3Fdown" class="slide-img" alt="Third slide" style="width:100%;height: 550px;">
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div> 
	<div>
		<div class="content">
			<h3>
				推荐内容
			</h3>
			<div class="content-ranking" style="background: #0fa5fa;height: 800px;">
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542390538195&di=9046925ddb8dca29e25fea16111a9182&imgtype=0&src=http%3A%2F%2Fimage.fsyule.net%2F2017-02-21%2F69a63bf30041221f3dfca19e46794005.png">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542393849854&di=f410d2880bcb2740f2135353c5dcf617&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F18%2F20141218175617_AsJcx.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542393849853&di=56ee49908625fd199224cd295bee0c83&imgtype=0&src=http%3A%2F%2Fphoto.tuchong.com%2F2591886%2Ff%2F29461197.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542393849850&di=42f5a4a76f7c7a0b9e918bbe2d371664&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F27%2F20170727140437_mRZij.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542988651&di=cfa7c0a0b942f987fe427fb3abd4fe3f&imgtype=jpg&er=1&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181022%2F191df76cfd93472db2b466e2b184aeaf.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022386664&di=a0572da5c1823d22b74597c6afbd4f8e&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201502%2F24%2F20150224135055_L4SWu.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542393966079&di=6d682d02224c289f85abc29c9f2dc9cd&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227131511_mTArZ.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542390538196&di=81b5511c865e01a4a7152e828fc1230c&imgtype=0&src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-927e2cdf35ac0300065724d1f9303189_b.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542988740&di=b1a76792f1606c1b15e0c3ebd17dab28&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F26%2F20180526224651_luvcj.jpg">
				</div><div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542988757&di=608288d1af2369cc0a779a138971b0a1&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f9955bd2f4b0a801213dea59fb8e.jpg%401280w_1l_2o_100sh.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542394047845&di=468b621fe7c81621e9594d7227e72db0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428195514_SXRVa.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542394057877&di=7a4f2be19606883b0086b787436c1a92&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227135547_FTkiz.jpeg">
				</div>	
			</div>
			<h3>
				热门专辑
			</h3>
			<div class="content-ranking" style="background: #0fa5fa;height: 800px;">
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022588618&di=1730c3f66de8d3f2d5fe48bd1e7bb93d&imgtype=0&src=http%3A%2F%2Fimg.mymusic.net.tw%2Fmms%2Falbum%2FL%2F889%2F389889.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022518046&di=e326780fedd01c905fb51fe669ba33e2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf44624aec0f9d3572c10dfcfcb.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022386664&di=a0572da5c1823d22b74597c6afbd4f8e&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201502%2F24%2F20150224135055_L4SWu.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022588618&di=1730c3f66de8d3f2d5fe48bd1e7bb93d&imgtype=0&src=http%3A%2F%2Fimg.mymusic.net.tw%2Fmms%2Falbum%2FL%2F889%2F389889.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022518046&di=e326780fedd01c905fb51fe669ba33e2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf44624aec0f9d3572c10dfcfcb.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022386664&di=a0572da5c1823d22b74597c6afbd4f8e&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201502%2F24%2F20150224135055_L4SWu.jpeg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022588618&di=1730c3f66de8d3f2d5fe48bd1e7bb93d&imgtype=0&src=http%3A%2F%2Fimg.mymusic.net.tw%2Fmms%2Falbum%2FL%2F889%2F389889.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022518046&di=e326780fedd01c905fb51fe669ba33e2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf44624aec0f9d3572c10dfcfcb.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022386664&di=a0572da5c1823d22b74597c6afbd4f8e&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201502%2F24%2F20150224135055_L4SWu.jpeg">
				</div><div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022588618&di=1730c3f66de8d3f2d5fe48bd1e7bb93d&imgtype=0&src=http%3A%2F%2Fimg.mymusic.net.tw%2Fmms%2Falbum%2FL%2F889%2F389889.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022518046&di=e326780fedd01c905fb51fe669ba33e2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf44624aec0f9d3572c10dfcfcb.jpg">
				</div>
				<div class="nine">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539022386664&di=a0572da5c1823d22b74597c6afbd4f8e&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201502%2F24%2F20150224135055_L4SWu.jpeg">
				</div>	
			</div>

		</div>
	</div>
	<div id="overlay" class="overlay">
		<strong style="width: 440px;
		height: 100px;
		font-size: 32px;
		color: #000;
		position: absolute;
		top: 350px;
		left: 50%;
		margin-left: -220px;">网站建设中，将于近期开放...</strong>
	</div>  


</body>
<script type="text/javascript">
	$(function stopScroll(){
		document.body.addEventListener('touchmove',bodyScroll,false);  
		$('body').css({'position':'fixed',"width":"100%"});
	});
	function bodyScroll(event){  
		event.preventDefault();  
	} 

</script>
</html>
</head>
